'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { Card } from '@/components/ui/card';
import { Alert } from '@/components/ui/alert';
import LoginForm from './login-form';

export default function LoginPage() {
  const searchParams = useSearchParams();
  const registered = searchParams.get('registered');
  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
  const { status } = useSession();
  const router = useRouter();
  console.log(status);
  
  useEffect(() => {
    // 暂时取消重定向逻辑
    // if (status === 'authenticated') {
    //   router.push(callbackUrl);
    // }
    console.log('当前登录状态:', status);
  }, [status, router, callbackUrl]);

  // 如果正在检查会话状态，显示加载状态
  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="flex flex-col items-center">
          <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500"></div>
          <p className="mt-3 text-gray-500">正在加载...</p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md p-8 space-y-8 shadow-lg">
        <div className="text-center">
          <h1 className="text-3xl font-bold tracking-tight text-gray-900">登录账户</h1>
          <p className="mt-2 text-sm text-gray-600">
            还没有账号？{' '}
            <Link
              href="/auth/register"
              className="font-medium text-blue-600 hover:text-blue-500"
            >
              立即注册
            </Link>
          </p>
        </div>

        {registered && (
          <Alert className="bg-green-50 border-green-500 text-green-700">
            注册成功！请使用您的邮箱和密码登录。
          </Alert>
        )}

        <div className="space-y-6">
          <LoginForm callbackUrl={callbackUrl} />
        </div>
      </Card>
    </div>
  );
} 